import React, { useMemo, useState } from 'react'
import Memo_Cp from './Memo_Cp';
function sum(a, b) {
    //函数执行
    console.log('sum函数执行');
    //模拟函数执行很慢,会导致组件渲染很慢
    const begin = Date.now()
    while (1) {
        if (Date.now() - begin > 3000) {
            break;
        }
    }
    //该函数组件每次重新渲染后每次都会执行
    return a + b
}
let a = 123;
let b = 456;
function Memo() {
    const [count, setCount] = useState(0)

    if (count % 4 == 0) {
        a += count
    }
    // const res = sum(123, 456)//这种写法会导致组件渲染变慢
    const res = useMemo(() => {
        return sum(a, b)
    }, [a, b])
    const MemoElm = useMemo(() => {
        return <Memo_Cp a={a} b={b}></Memo_Cp>
    }, [a, b])
    return (
        <div>Memo

            <h2>result：{res}</h2>
            <h3>count:{count}</h3>
            <button onClick={() => { setCount(pre => pre + 1) }}>点我count++</button>
            {/* 组件 */}
            {/* < Memo_Cp a={a} b={b}/>   这种写法组件加载很慢 */}
            {MemoElm}

        </div>
    )
}

export default Memo